<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Class UI.Grid</title>
	<link href="../resources/API_Help.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!--打印本页-->
<div class="printCurrentPage">
	<img src="../resources/image/print.gif" align="absmiddle" />&nbsp;
	<a href="ui_Grid_API.html" target="_blank">打印本页</a>
</div><br/>

<!--标题说明-->
<h1>Class UI.Grid</h1>
<b>定义于文件：</b>&nbsp;&nbsp;ui_grid.js
<div class="description">将页面对象渲染成数据列表控件。</div><br/>
<b>基本语法</b>
<div class="syntax">var grid = new <b>UI.Grid</b>( { &lt; <em>id:String|Tag</em> &gt; [ , <em>width:Number</em>,&nbsp;&nbsp;<em>height:Number</em>,&nbsp;&nbsp;<em>click:Functioin</em>,&nbsp;&nbsp;<em>dblclick:Functioin</em>,&nbsp;&nbsp;<em>heads:Array</em>,&nbsp;&nbsp;<em>border:boolean</em>,&nbsp;&nbsp;<em>data:Array|JSON</em> ] } );</div>
<b>参数说明</b>
<div class="parameter">
	<ul>
		<li><em>id</em> : String|Tag</li>
		<div class="subDesc">页面列表标签ID或是页面列表标签对象。</div>
		<li><em>width</em> : Number</li>
		<div class="subDesc">(可选参数) 数据列表的宽度, 默认值: 500px。</div>
		<li><em>height</em> : Number</li>
		<div class="subDesc">(可选参数) 数据列表的高度, 默认值: 300px。</div>
		<li><em>click</em> : Functioin</li>
		<div class="subDesc">(可选参数) 数据列表的行单击事件回调。</div>
		<li><em>dblclick</em> : Functioin</li>
		<div class="subDesc">(可选参数) 数据列表的行双击事件回调。</div>
		<li><em>heads</em> : Array</li>
		<div class="subDesc">(可选参数) 数据列表的表头配置参数。</div>
		<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;表头成员的参数语法: { <em>text:String</em>,&nbsp;&nbsp;<em>width:Number</em>,&nbsp;&nbsp;<em>valueKey:String</em>,&nbsp;&nbsp;<em>checked:boolean</em>,&nbsp;&nbsp;<em>editable:boolean</em>,&nbsp;&nbsp;<em>display:boolean</em>,&nbsp;&nbsp;<em>filter:Function</em> }
		<li><em>border</em> : boolean</li>
		<div class="subDesc">(可选参数) 数据列表是否自带边框。</div>
		<li><em>data</em> : Array|JSON</li>
		<div class="subDesc">(可选参数) 数据列表的数据集。</div>
		
	</ul>
</div>
<b>页面标签对象原型</b>
<div class="parameter">
	&lt;div&gt;&lt;/div&gt;
</div>
<b>依赖关系</b>
<div class="parameter">
	<a href="core_API.html">core.js</a>　　<a href="#">webui.js</a>
</div><br/>
<a href="#properties">相关属性</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#methods">相关方法</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#events">相关事件</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#examples">应用示例</a>
<hr>

<!--相关属性-->
<a name="properties"></a>
<h2>相关属性</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有属性</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.Grid.dom" class="methodLink">UI.Grid.dom</a>&nbsp;:&nbsp;&lt;div&gt;<br/>
				数据列表控件的页面标签对象。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
	</tbody>
</table>

<!--相关方法-->
<a name="methods"></a>
<h2>相关方法</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有方法</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#clearGroup" class="methodLink">clearGroup</a>()&nbsp;:&nbsp;none<br/>
				清除列表的分组设置。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#fillData" class="methodLink">fillData</a>( <em>list:Array</em> )&nbsp;:&nbsp;none<br/>
				填充列表数据。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#fillGroup" class="methodLink">fillGroup</a>( <em>group:Array</em> )&nbsp;:&nbsp;none<br/>
				以分组数据填充列表。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#getGridInfo" class="methodLink">getGridInfo</a>()&nbsp;:&nbsp;JSON<br/>
				返回列表的分组与排序信息。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#getModiCheckBoxValues" class="methodLink">getModiCheckBoxValues</a>()&nbsp;:&nbsp;Array<br/>
				返回可编辑checkBox列的操作集合。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#getSelectRow" class="methodLink">getSelectRow</a>()&nbsp;:&nbsp;JSON<br/>
				返回列表当前选择行的信息。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#isGroup" class="methodLink">isGroup</a>()&nbsp;:&nbsp;boolean<br/>
				列表本身是否是分组列表。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#lock" class="methodLink">lock</a>( <em>flag:boolean</em> )&nbsp;:&nbsp;none<br/>
				列表锁定操作。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#selectCheckBoxs" class="methodLink">selectCheckBoxs</a>( <em>mode:String</em> )&nbsp;:&nbsp;none<br/>
				设置列表中CheckBox的选择状态。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setGroupField" class="methodLink">setGroupField</a>( <em>name:String</em>,&nbsp;&nbsp;<em>index:Number</em> )&nbsp;:&nbsp;none<br/>
				设置列表的分组字段信息。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setHeadDisplay" class="methodLink">setHeadDisplay</a>( <em>index:Number</em>,&nbsp;&nbsp;<em>display:boolean</em> )&nbsp;:&nbsp;none<br/>
				设置指定表头列显示状态。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setHeadSort" class="methodLink">setHeadSort</a>( <em>name:String</em>,&nbsp;&nbsp;<em>colIdx:Number</em>,&nbsp;&nbsp;<em>status:boolean</em> )&nbsp;:&nbsp;none<br/>
				设置指定表头列排序状态。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setSize" class="methodLink">setSize</a>( <em>width:Number</em>,&nbsp;&nbsp;<em>height:Number</em> )&nbsp;:&nbsp;none<br/>
				设置数据列表的尺寸大小。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
	</tbody>
</table>

<!--相关事件-->
<a name="events"></a>
<h2>相关事件</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有事件</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.Grid.onCloseEvent" class="methodLink">UI.Grid.clickEvent</a>&nbsp;:&nbsp;Function<br/>
				数据列表的行单击动作事件。
			</td><td class="tableLineRight">UI.Grid</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#UI.Grid.onOpenEvent" class="methodLink">UI.Grid.dblclickEvent</a>&nbsp;:&nbsp;Function<br/>
				数据列表的行双击动作事件。
			</td><td class="tableLineRight alt">UI.Grid</td>
		</tr>
	</tbody>
</table>
<br/>

<hr>

<!--相关属性的详细说明-->
<h2>本类属性的详细说明</h2>
<div class="detailWrap">

<a name="UI.Grid.dom"></a>
<div class="mdetail">
	<h3>UI.Grid.dom</h3><br/>
	<div class="mdetailDetails">
		数据列表控件的页面标签对象。<br/>
		通过 dom 属性可直接对数据列表进行相关DOM操作。
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关方法的详细说明-->
<h2>本类方法的详细说明</h2>
<div class="detailWrap">

<a name="clearGroup"></a>
<div class="mdetail">
	<h3>clearGroup</h3>
	<div class="functionDefine">public function clearGroup()</div>
	<div class="mdetailDetails">
		清除列表的分组设置。<br/>
		本方法是将数据列表的分组信息设置为 null。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="fillData"></a>
<div class="mdetail alt">
	<h3>fillData</h3>
	<div class="functionDefine">public function fillData( list:Array )</div>
	<div class="mdetailDetails">
		为列表填充数据。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<li><em>list</em> : Array</li>
		<div class="subDesc">
			要填充的数据集合，list是一个数组，每个数组元素是JSON对象，JSON对象中的属性名称应和定义列表的heads参数中valueKey相对应。<br/>
			Grid组件采用的是模板生成算法，这样的优点是行字段的顺序的灵活控制和生成效率高。
		</div>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="fillGroup"></a>
<div class="mdetail">
	<h3>fillGroup</h3>
	<div class="functionDefine">public function fillGroup( group:Array )</div>
	<div class="mdetailDetails">
		以分组数据填充列表，Grid组件支持一级的分组模式。<br/>
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<li><em>group</em> : Array</li>
		<div class="subDesc">
			要填充的数据集合，group是一个数组，每个数组元素是JSON对象，
			group成员的参数语法: { <em>value:String</em>,&nbsp;&nbsp;<em>list:Array</em> }<br/>
			value：分组名称与分组值，list与fillData方法中list要求一样。
		</div>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="getGridInfo"></a>
<div class="mdetail alt">
	<h3>getGridInfo</h3>
	<div class="functionDefine">public function getGridInfo()</div>
	<div class="mdetailDetails">
		返回列表的分组与排序信息。
	</div><br/>
	<div class="mdetailDetails">
		<b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>JSON: { <em>colName:groupName</em>,&nbsp;&nbsp;<em>orderName:orderName</em>,&nbsp;&nbsp;<em>sc:orderType</em> }</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="getModiCheckBoxValues"></a>
<div class="mdetail">
	<h3>getModiCheckBoxValues</h3>
	<div class="functionDefine">public function getModiCheckBoxValues()</div>
	<div class="mdetailDetails">
		返回可编辑checkBox列的操作集合。
		这里要注意一下，getModiCheckBoxValues方法只返回你编辑过的checkBox的信息。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>
			Array<br/>
			集合的成员语法: { <em>id:String</em>,&nbsp;&nbsp;<em>checked:boolean</em> }
		</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="getSelectRow"></a>
<div class="mdetail alt">
	<h3>getSelectRow</h3>
	<div class="functionDefine">public function getSelectRow()</div>
	<div class="mdetailDetails">
		返回列表当前选择行的信息，信息包括当前行的全部字段信息和行所属的分组信息。<br/>
	</div><br/>
	<div class="mdetailDetails">
		<b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>
			JSON<br/>
			集合的成员语法: { <em>info:<span style="color:blue">groupName:value</span></em>,&nbsp;&nbsp;<em>bean:Array</em> }
		</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="isGroup"></a>
<div class="mdetail">
	<h3>isGroup</h3>
	<div class="functionDefine">public function isGroup()</div>
	<div class="mdetailDetails">
		列表本身是否是分组列表。<br/>
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>boolean</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="lock"></a>
<div class="mdetail alt">
	<h3>lock</h3>
	<div class="functionDefine">public function lock( flag:boolean )</div>
	<div class="mdetailDetails">
		列表锁定操作。<br/>
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>flag</em> : boolean</li>
			<div class="subDesc">参数的取值&nbsp;&nbsp;&nbsp;&nbsp;true: 显示, false: 隐藏。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="selectCheckBoxs"></a>
<div class="mdetail">
	<h3>selectCheckBoxs</h3>
	<div class="functionDefine">public function selectCheckBoxs( mode:String )</div>
	<div class="mdetailDetails">设置列表中CheckBox的选择状态。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>mode</em> : String</li>
			<div class="subDesc">参数的取值&nbsp;&nbsp;&nbsp;&nbsp;All: 全选, NONE: 全不选, CTY: 反选。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="setGroupField"></a>
<div class="mdetail alt">
	<h3>setGroupField</h3>
	<div class="functionDefine">public function setGroupField( name:String, index:Number )</div>
	<div class="mdetailDetails">设置列表的分组字段信息。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>name</em> : String</li>
			<div class="subDesc">设置分组字段名称 。</div>
			<li><em>index</em> : Number</li>
			<div class="subDesc">分组字段在heads中的index。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="setHeadDisplay"></a>
<div class="mdetail">
	<h3>setHeadDisplay</h3>
	<div class="functionDefine">public function setHeadDisplay( index:Number, display:boolean )</div>
	<div class="mdetailDetails">设置指定表头列显示状态。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>index</em> : Number</li>
			<div class="subDesc">被设置列在表头中的索引。</div>
			<li><em>display</em> : boolean</li>
			<div class="subDesc">
				显示状态，参数的取值&nbsp;&nbsp;&nbsp;&nbsp;true: 显示, false: 隐藏。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="setHeadSort"></a>
<div class="mdetail alt">
	<h3>setHeadSort</h3>
	<div class="functionDefine">public function setHeadSort( name:String, colIdx:Number, status:boolean )</div>
	<div class="mdetailDetails">设置指定表头列排序状态。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>name</em> : String</li>
			<div class="subDesc">要排序的字段名称。</div>
			<li><em>colIdx</em> : Number</li>
			<div class="subDesc">排序字段在表头中的索引。</div>
			<li><em>status</em> : boolean</li>
			<div class="subDesc">排序类型，参数的取值&nbsp;&nbsp;&nbsp;&nbsp;ASC: 升序, DESC: 降序, 默认值为空。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="setSize"></a>
<div class="mdetail">
	<h3>setSize</h3>
	<div class="functionDefine">public function setSize( width:Number, height:Number )</div>
	<div class="mdetailDetails">设置数据列表的大小。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>width</em> : Number</li>
			<div class="subDesc">数据列表的宽度, 默认值: 500px。</div>
			<li><em>height</em> : Number</li>
			<div class="subDesc">数据列表的高度, 默认值: 300px。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关事件的详细说明-->
<h2>本类事件的详细说明</h2>
<div class="detailWrap">

<a name="UI.Grid.clickEvent"></a>
<div class="mdetail">
	<h3>UI.Grid.clickEvent</h3><br/>
	<div class="mdetailDetails">
		数据列表的行单击动作事件。
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

<a name="UI.Grid.dblclickEvent"></a>
<div class="mdetail alt">
	<h3>UI.Grid.dblclickEvent</h3><br/>
	<div class="mdetailDetails">
		数据列表的行双击动作事件。
	</div>
	<div class="footer since">@since JSR2.5&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_Grid_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--应用示例-->
<a name="examples"></a>
<h2>应用示例</h2>
<div class="properties"><a href="../Example/ui_Grid.html" target="_blank">ui_Grid.html</a></div><br/>

<!--页脚-->
<hr>
<div class="footer">JSR - Copyright &copy; 2007-2008 Jsr JS, LLC<br/>All rights reserved.</div>
</body>
</html>
